import React, { useState, useEffect } from 'react';
import { history } from 'umi'
import { Tabs, Empty } from 'antd';
import { connect } from 'umi';
import authHelper from '@/utils/auth/helper';
import { eventTrack } from '@/utils/track';
import { MoreBar } from '../common/TabBarExtraContent';
import styles from '../../homepage.less';
import EntryList from './EntryList';
import AdjustPost from './AdjustPost';
import Regularization from './Regularization';
import QuitManagement from './QuitManagement';

const { TabPane } = Tabs;
const { checkCode } = authHelper;
/**
 * 我的入转调离
 */
const OnboardAndLeave = ({ responders }) => {
    const entryAuthority = authHelper.checkCode('office:personnel:progress');

    const [activeKey, setActiveKey] = useState(entryAuthority ? 'add' : 'onboard');
    const { onAdd, onDelete } = responders;
    const tabs = [
        {
            name: '入职',
            code: 'office:personnel:progress:entry',
            key: 'add',
            component: EntryList,
            path: '/personal/portal/myOnboardAndLeave/myEntryManagement',
            query: {}
        },
        {
            name: '转正',
            key: 'onboard',
            code: true,
            component: Regularization,
            path: '/personal/portal/myOnboardAndLeave/myRegularization',
            query: {}
        },
        {
            name: '调岗',
            key: 'adjustPost',
            code: true,
            component: AdjustPost,
            path: '/personal/portal/myOnboardAndLeave/myAdjustPost',
            query: {}
        },
        {
            name: '离职',
            key: 'leave',
            code: true,
            component: QuitManagement,
            path: '/personal/portal/myOnboardAndLeave/myQuitManagement',
            query: {}
        }
    ];
    const hasAuth = tabs.filter(item => checkCode(item.code));

    const moreEventHandler = (e, url) => {
        eventTrack({
            eventName: 'portal_my_onboard_and_leave_more_click',
            pageName: 'personal_portal'
        });
        history.push(url);
    };

    const [linkProps, setLinkProps] = useState({
        to: hasAuth.length > 0 ? hasAuth[0].path : '',
        query: hasAuth.query || {},
        onClick: moreEventHandler
    });
    const callback = key => {
        setActiveKey(key);
        setLinkProps({
            to: tabs.find(item => item.key === key).path,
            query: tabs.find(item => item.key === key).query || {},
            onClick: moreEventHandler
        });
    };
    useEffect(() => {
        if (hasAuth.length > 0) {
            setActiveKey(hasAuth[0].key);
        }
    }, []);
    return (
        <Tabs
            className={`${styles.wnWdlcTitle} ${styles.transferTitle}`}
            activeKey={activeKey}
            onChange={callback}
            onTabClick={key => {
                let eventName;
                if (key === 'add') {
                    eventName = '';
                } else if (key === 'onboard') {
                    eventName = 'portal_my_onboard_and_leave_regularization_click';
                } else if (key === 'adjustPost') {
                    eventName = 'portal_my_onboard_and_leave_adjustpost_click';
                } else if (key === 'leave') {
                    eventName = 'portal_my_onboard_and_leave_office_click';
                }
                eventTrack({
                    eventName,
                    pageName: 'personal_portal'
                });
            }}
            tabBarExtraContent={
                <MoreBar
                    // hideMoreBtn={activeKey === 'add'}
                    onAdd={onAdd}
                    onDelete={onDelete}
                    linkProps={linkProps}
                />
            }
        >
            {/* {entryAuthority && (
                <TabPane tab="入职" key="add">
                    <EntryList />
                </TabPane>
            )} */}
            {/* <TabPane tab="转正" key="onboard">
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </TabPane> */}
            {/* <TabPane tab="调岗" key="switch">
                <AdjustPost />
            </TabPane> */}
            {/* <TabPane tab="离职" key="leave">
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            </TabPane> */}
            {hasAuth.map(item => (
                <TabPane tab={item.name} key={item.key}>
                    {item.component ? <item.component /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                </TabPane>
            ))}
        </Tabs>
    );
};
export default connect(({ loading, rules }) => ({
    rules,
    loading
}))(OnboardAndLeave);
